<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    
    <!-- 富文本编辑器 -->
	<link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>

	<!-- bootstarp-fileinput -->
	<link rel="stylesheet" type="text/css" href="../js/bootstrap-fileinput/css/fileinput.min.css"/>
	<script type="text/javascript" src="../js/bootstrap-fileinput/js/fileinput.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-fileinput/js/locales/zh.js"></script>






</head>

<body class="hold-transition skin-red sidebar-mini" >

<!-- 正文区域 -->
<section class="content">

	<div class="box-body">

		<!--tab页-->
		<div class="nav-tabs-custom">

			<!--tab头-->
			<ul class="nav nav-tabs">
				<li class="active">
					<a href="#home" data-toggle="tab">商品基本信息</a>
				</li>
				<li >
					<a href="#pic_upload" data-toggle="tab">商品图片</a>
				</li>
				<li >
					<a href="#customAttribute" data-toggle="tab">扩展属性</a>
				</li>
				<li >
					<a href="#spec" data-toggle="tab" >规格</a>
				</li>
			</ul>
			<!--tab头/-->

			<!--tab内容-->
			<div class="tab-content">

				<!--表单内容-->
				<div class="tab-pane active" id="home">
					<div class="row data-type">
					   <div class="col-md-2 title">商品分类</div>

						  <div class="col-md-10 data">
							<table>
								<tr>
									<td>
										<select id="sheng" class="form-control" onchange="getShi(this)">
											<option value="-1">请选择</option>
										</select>
									</td>
									<td>
										<select id="shi" class="form-control select-sm" onchange="getXian(this)">
											<option value="-1">请选择</option>
										</select>
									</td>
									<td>
										<select id="xian" class="form-control select-sm" onchange="getTypeId(this)">
											<option value="-1">请选择</option>
										</select>
									</td>
									<td>
										<input type="hidden" id="typeId" >
									</td>
								</tr>
							</table>
							  <!--查询商品类目，通过三级联动来做-->
							  <script>
								  $(function() {
									  getSheng();
								  })
								  function getSheng() {
									  $("#typeId").val(0);
									  $.ajax({
										  url : "/goodsController/getDoodsByPid",
										  type : "post",
										  data : {pid:0},
										  dataType : "json",
										  async : false,
										  success : function(result){
											  var city = result.data;
											  var html = "<option value='-1'>请选择</option>";
											  $(city).each(function(i,e){
												  html += "<option value='"+e["id"]+"'>"+e["name"]+"</option>";
											  })
											  $("#sheng").html(html);
										  },
										  error :function(){
											  toastr.error("系统异常,请联系管理员");
										  }
									  })
								  }
								  function getShi(obj) {
									  $("#xian").html("<option value='-1'>请选择</option>");
									  var pid= $(obj).val();
									  $.ajax({
										  url : "/goodsController/getDoodsByPid",
										  type : "post",
										  data : {pid:pid},
										  dataType : "json",
										  async : false,
										  success : function(result){
											  var city = result.data;
											  var html = "<option value='-1'>请选择</option>";
											  $(city).each(function(i,e){
												  html += "<option value='"+e["id"]+"'>"+e["name"]+"</option>";
											  })
											  $("#shi").html(html);
										  },
										  error :function(){
											  toastr.error("系统异常,请联系管理员");
										  }
									  })
								  }
								  function getXian(obj) {

									  var pid= $(obj).val();
									  $.ajax({
										  url : "/goodsController/getDoodsByPid",
										  type : "post",
										  data : {pid:pid},
										  dataType : "json",
										  async : false,
										  success : function(result){
											  var city = result.data;
											  var html = "<option value='-1'>请选择</option>";
											  $(city).each(function(i,e){
												  html += "<option id='"+e["id"]+"' value='"+e["typeId"]+"'>"+e["name"]+"</option>";
											  })
											  $("#xian").html(html);
										  },
										  error :function(){
											  toastr.error("系统异常,请联系管理员");
										  }
									  })
								  }
								  function getTypeId(obj) {
									  var typeId= $(obj).val();
									  $("#typeId").val(typeId);
									  getBrandSel(typeId);
									  getCustom(typeId);
									  getSpec(typeId);
								  }
							  </script>

						  </div>


					   <div class="col-md-2 title">商品名称</div>
					   <div class="col-md-10 data">
						   <input type="text" id="goodsName" class="form-control"    placeholder="商品名称" value="">
					   </div>

					   <div class="col-md-2 title">品牌</div>
					   <div class="col-md-10 data">
						  <select class="form-control" id="brandId">

						  </select>
					   </div>

					   <div class="col-md-2 title">副标题</div>
					   <div class="col-md-10 data">
						   <input type="text" id="caption" class="form-control"   placeholder="副标题" value="">
					   </div>

					   <div class="col-md-2 title">价格</div>
					   <div class="col-md-10 data">
						   <div class="input-group">
							   <span class="input-group-addon">¥</span>
							   <input type="text" id="price" class="form-control"  placeholder="价格" value="">
						   </div>
					   </div>

					   <div class="col-md-2 title editer">商品介绍</div>
					   <div class="col-md-10 data editer">
						   <textarea id="introduction" name="content" style="width:800px;height:400px;visibility:hidden;" ></textarea>
					   </div>

					   <div class="col-md-2 title rowHeight2x">包装列表</div>
					   <div class="col-md-10 data rowHeight2x">

						<textarea rows="4"  id="packageList" class="form-control"   placeholder="包装列表"></textarea>
					   </div>

					   <div class="col-md-2 title rowHeight2x">售后服务</div>
					   <div class="col-md-10 data rowHeight2x">
						   <textarea rows="4" id="saleService" class="form-control"    placeholder="售后服务"></textarea>
					   </div>


					</div>
				</div>
				<!--查询第三级类目是触发此事件，根据模板id查询相应的品牌-->
				<script>
					function getBrandSel(typeId) {
						$.ajax({
							url : "/goodsController/getBrandByTypeid",
							type : "post",
							data : {typeId:typeId},
							dataType : "json",
							async : false,
							success : function(result){
								if(result.code == 200){
									var template = result.data;
									//字符串转对象
									var specIds =JSON.parse(template.brandIds);
									var html = "<option value='-1'>请选择</option>";
									$(specIds).each(function(i,e){
										html += "<option value='"+e["id"]+"'>"+e["text"]+"</option>";
									})
									$("#brandId").html(html);
								}
							},
							error :function(result){
								alert(result.message);
							}
						})
					}
				</script>

				<!--图片上传-->
				<div class="tab-pane" id="pic_upload">
					<div class="row data-type">
					 <!-- 颜色图片 -->
					 <div class="btn-group">
						 <button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>

					 </div>

					 <table class="table table-bordered table-striped table-hover dataTable">
							<thead>
								<tr>

									<th class="sorting">颜色</th>
									<th class="sorting">图片</th>
									<th class="sorting">操作</th>
							</thead>
							<tbody id="goodsImgs">
							  <!--<tr><td></td><td><img alt="" src="" width="100px" height="100px"></td><td> <button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button></td></tr>-->
							</tbody>
					 </table>

					</div>
				</div>


				<!--扩展属性-->
				<div class="tab-pane" id="customAttribute">
					<div class="row data-type"  id="customss">

					</div>
				</div>
				<!--回显拓展属性-->
				<script>
					function getCustom(typeId) {
						$.ajax({
							url : "/goodsController/getBrandByTypeid",
							type : "post",
							data : {typeId:typeId},
							dataType : "json",
							async : false,
							success : function(result){
								if(result.code == 200){
									var template = result.data;
									//字符串转对象
									var customIds =JSON.parse(template.customAttributeItems);
									var html = "";
									$(customIds).each(function(i,e){
										html += '<div><div class="col-md-2 title">'+e["text"]+'</div><div class="col-md-10 data"><input class="form-control" placeholder="'+e["text"]+'"></div></div>';
									})
									$("#customss").html(html);
								}
							},
							error :function(result){
								alert(result.message);
							}
						})
					}
				</script>

				<!--规格-->
				<div class="tab-pane" id="spec">
					<div class="row data-type">
						<div class="col-md-2 title">是否启用规格</div>
						<div class="col-md-10 data">
							<input type="checkbox" id="showDiv">
						</div>
					</div>
					<p>

					<div>
						<div class="row data-type" id="specpj">

						</div>
					<!--根据模板id查询模板表里的规格数据-->
					<script>
						function getSpec(typeId) {
							$.ajax({
								url : "/goodsController/getBrandByTypeid",
								type : "post",
								data : {typeId:typeId},
								dataType : "json",
								async : false,
								success : function(result){
									if(result.code == 200){
										var template = result.data;
										//字符串转对象
										var specIds =JSON.parse(template.specIds);
										console.log(specIds)
										var specllst = [];
										var html = "";
										/*<input type="hidden" value="'+e["id"]+'">*/
										$(specIds).each(function(i,e){
											html += '<div><div class="col-md-2 title">'+e["text"]+'</div><div class="col-md-10 data" id="'+e["id"]+'">';
											html += '</div></div>';
											specllst.push(e["id"]);
										})
										$("#specpj").html(html);
										//获取规格选项
										getspecOpt(specllst);
									}
								},
								error :function(result){
									alert(result.message);
								}
							})
						}
					</script>
					<!--点击是否启用规格选项，隐藏和展示规格-->
					<script>
						/*默认隐藏*/
						document.getElementById("specpj").style.display = "none";//隐藏
						$("#showDiv").change(function () {
							if($("#showDiv").is(":checked")){
								document.getElementById("specpj").style.display = "";//显示
							}else {
								/*默认隐藏*/
								document.getElementById("specpj").style.display = "none";//隐藏
							}
						})
					</script>
					<!--获取规格选项-->
					<script>
						function getspecOpt(specllst) {
							$.ajax({
								url : "/goodsController/getSpecById",
								type : "post",
								data : {specId:specllst},
								dataType : "json",
								async : false,
								success : function(result){
									var map = result.data;
									if(result.code == 200){
										for (var i=0; i<specllst.length;i++ ) {
											var id = specllst[i];
											var speclist = map[id];
											var info = "";
											$(speclist).each(function (i,e) {
												info += e.optionName + "<input type='checkbox'value='"+e['optionName']+"'>";
											})
											$("#" + id +"").html(info)
										}
									}
								},
								error :function(result){
									alert(result.message);
								}
							})
						}

					</script>

						<div class="row data-type">
							 <table class="table table-bordered table-striped table-hover dataTable">
								<thead>
									<tr>
										<th class="sorting">屏幕尺寸</th>
										<th class="sorting">网络制式</th>
										<th class="sorting">价格</th>
										<th class="sorting">库存</th>
										<th class="sorting">是否启用</th>
										<th class="sorting">是否默认</th>
									</tr>
								</thead>
								<tbody id="specOption">
								  <tr>
										<td>
											4.0
										</td>
										<td>
											移动3G
										</td>
										<td>
											<input class="form-control"  placeholder="价格">
										</td>
										<td>
											<input class="form-control" placeholder="库存数量">
										</td>
										<td>
											<input type="checkbox" >
										</td>
										<td>
											<input type="checkbox" >
										</td>
								  </tr>
								  <tr>
										<td>
											4.0
										</td>
										<td>
											联通3G
										</td>
										<td>
											<input class="form-control"  placeholder="价格">
										</td>
										<td>
											<input class="form-control" placeholder="库存数量">
										</td>
										<td>
											<input type="checkbox" >
										</td>
										<td>
											<input type="checkbox" >
										</td>
								  </tr>
								  <tr>
										<td>
											5.0
										</td>
										<td>
											移动4G
										</td>
										<td>
											<input class="form-control"  placeholder="价格">
										</td>
										<td>
											<input class="form-control" placeholder="库存数量">
										</td>
										<td>
											<input type="checkbox" >
										</td>
										<td>
											<input type="checkbox" >
										</td>
								  </tr>
								  <tr>
										<td>
											5.0
										</td>
										<td>
											联通4G
										</td>
										<td>
											<input class="form-control"  placeholder="价格">
										</td>
										<td>
											<input class="form-control" placeholder="库存数量">
										</td>
										<td>
											<input type="checkbox" >
										</td>
										<td>
											<input type="checkbox" >
										</td>
								  </tr>

								</tbody>
							</table>

						</div>

					</div>
				</div>

			</div>
			<!--tab内容/-->
			<!--表单内容/-->

		</div>

	   </div>
	  <div class="btn-toolbar list-toolbar">
		  <button class="btn btn-primary" onclick="saveGoods()"><i class="fa fa-save"></i>保存</button>
		  <button class="btn btn-primary" onclick="ckck()"><i class="fa fa-save"></i>查看查看</button>
		  <button class="btn btn-default" >返回列表</button>
	  </div>
	<script>
		function ckck() {
			var trlist =  $("#specOption").find("tr");
			var itemArr = [];
			for (var i = 0;i < trlist.length;i++){
				var item = {};
				var value = $(trlist[i]).find("td").eq(0).html().trim();
				var value2 = $(trlist[i]).find("td").eq(1).html().trim();
				var price = $(trlist[i]).find("td").eq(2).find("input").val();
				var num = $(trlist[i]).find("td").eq(3).find("input").val();
				var spec = {"屏幕尺寸":value,"网络制式":value2};
				item.spec = spec;
				item.price = price;
				item.num = num;
				itemArr.push(item)
			}
			var itemList = JSON.stringify(itemArr);
			alert(itemList)

		}

		function saveGoods() {
			//editor.sync();
			var category1Id = $("#sheng").val();
			//alert(category1Id)
			var category2Id = $("#shi").val();
			//alert(category2Id)
			var category3Id = $("#xian").find("option:selected").attr("id");
			//alert(category3Id)
			var goodsName = $("#goodsName").val();
			//品牌id
			var brandId = $("#brandId").val();
			//副标题
			var caption = $("#caption").val();
			//价格
			var price = $("#price").val();
			//商品介绍
			editor.sync();
			var introduction = $("#introduction").val();
			//包装列表
			var packageList = $("#packageList").val();
			//售后服务
			var saleService = $("#saleService").val();
			//模板id
			var typeTemplateId = $("#typeId").val();
			//拼接图片信息
			var itemImagesList = [];
			var trList = $("#goodsImgs").find("tr");
			$.each(trList,function (i,tr) {
				var color =    $(tr).children('td').children('input').eq(0).val();
				var url =$(tr).children('td').children('img').attr("src");
				var data = '{"color":"'+color+'","url":"'+url+'"}';
				itemImagesList.push(data);
			})
			var itemImages = "["+itemImagesList+"]";
			//扩展属性
			var customAttrItems = [];
			var inputList = $("#customss").find("input");
			$.each(inputList,function (i,input) {
				var text = $(input).attr("placeholder");
				var value = $(input).val();
				var data = '{"text":"'+text+'","value":"'+value+'"}';
				customAttrItems.push(data);
			})
			var customAttrbuteItem = "["+customAttrItems+"]";
			//规格选项
			var specArr = [];
			var div = $("#specpj").children("div");
			$.each(div,function (i,e) {
				var attrSpec = {}
				var div1 = $(e).find('div').eq(0);
				var input = $(e).find('div').eq(1).find('input');
				attrSpec.attributeName = $(div1).html();
				var arr = [];
				$.each(input,function (i,ee) {
					if($(ee).prop("checked")){
						arr.push($(ee).val());
					}
					attrSpec.attributeValue = arr;
				})
				specArr.push(attrSpec)
			})
			var specifiItems= JSON.stringify(specArr)

			//规格
			var trlist =  $("#specOption").find("tr");
			var itemArr = [];
			for (var i = 0;i < trlist.length;i++){
				var item = {};
				var value = $(trlist[i]).find("td").eq(0).html().trim();
				var value2 = $(trlist[i]).find("td").eq(1).html().trim();
				var price = $(trlist[i]).find("td").eq(2).find("input").val();
				var num = $(trlist[i]).find("td").eq(3).find("input").val();
				var spec = {"屏幕尺寸":value,"网络制式":value2};
				item.spec = spec;
				item.price = price;
				item.num = num;
				//图片
				var itemImage = null;
				var trList = $("#goodsImgs").find("tr");
				$.each(trList,function (i,tr) {
					itemImage =$(tr).children('td').children('img').attr("src");
				})
				item.image = itemImage;
				itemArr.push(item)
			}
			var itemList = JSON.stringify(itemArr);


			$.ajax({
				url:"/goodsController/insertGoods",
				type:"post",
				data:{category1Id:category1Id,category2Id:category2Id,category3Id:category3Id,goodsName:goodsName,brandId:brandId,caption:caption,price:price,introduction:introduction,packageList:packageList,saleService:saleService,typeTemplateId:typeTemplateId,itemImages:itemImages,customAttributeItems:customAttrbuteItem,specificationItems:specifiItems,itemList:itemList},
				dataType:"json",
				async:false,
				success:function(result){
					if (result.code == 200) {
						alert(result.message);
						window.location.reload();
					}
				},
				error:function(result){
					alert(result.message);
				}
			})
		}
	</script>

</section>
            
            
<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">上传商品图片</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped">
		      	<tr>
		      		<td>颜色</td>
		      		<td><input  id="color" class="form-control" placeholder="颜色" >  </td>
		      	</tr>			    
		      	<tr>
		      		<td>商品图片</td>
		      		<td>
						<table>
							<tr>
								<td>
									<input type="text" name="rimage" id="fileName">
									<label class="control-label" for="fileName">图片地址</label>
									<input type="file" id="myFile" name="image" multiple />
					            </td>
								<td>
									<img  src="" width="200px" height="200px">
								</td>
							</tr>						
						</table>
		      		</td>
		      	</tr>		      	
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success" onclick="addgoodsImgs()" data-dismiss="modal" aria-hidden="true">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>

<!--上传图片-->
<script type="text/javascript">
	function fileInit(){
		$('#myFile').fileinput({
			language: 'zh',
			uploadUrl: '/file/upload',
			maxFileCount :3, // 最多同时传送几个图片，需要加multiple注解
			enctype : 'multipart/form-data',
			maxFileSize : 1024, //单位为kb
			allowedFileExtensions : ['jpg', 'gif', 'png'],
			browseClass: 'btn btn-primary'
		});

		$('#myFile').on('fileuploaded',function(event, data, previewId, index){
			$("#fileName").val(data.response.imgUrl);
		})
	}

	$(function(){
		fileInit();
	})
</script>
<script>
	function addgoodsImgs() {
		var color = $("#color").val();
		alert(color)
		var url = $("#fileName").val();
		alert(url)
		var image ='<tr><td><input value="'+color+'"></td><td><img src="'+url+'" width="100px" height="100px"></td><td> <button type="button" onclick="deleteTr(this)" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button></td></tr>';
		$("#goodsImgs").append(image);
	}

	//删除增加的商品
	function deleteTr(obj) {
		var tr = $(obj).parent().parent();
		tr.remove();
	}

</script>

            <!-- 正文区域 /-->
<script type="text/javascript">

	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="content"]', {
			allowFileManager : true
		});
	});

</script>
       
</body>

</html>